<template>
    <div class="fghdjs">
        <el-form inline class="form-item-column column-2" label-width="95px">
            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="6">
                  <div class="grid-content bg-purple">
                      <el-form-item label="时间 :">{{ detailData.recoderDate }}</el-form-item>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
                 <el-form-item label="类型 :">{{ detailData.categoryName }}</el-form-item>
              </div></el-col>
            </el-row>
            
            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="6">
                  <div class="grid-content bg-purple">
                     <el-form-item label="厂家 :">{{ detailData.manuFactor }}</el-form-item>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
               <el-form-item label="物料名称 :">{{ detailData.recoderName }}</el-form-item>
              </div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="6">
                  <div class="grid-content bg-purple">
                    <el-form-item label="物料编号 :">{{ detailData.recoderNo }}</el-form-item>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
               <el-form-item label="规格 :">{{ detailData.recoderSku }}</el-form-item>
              </div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="6">
                  <div class="grid-content bg-purple">
                     <el-form-item label="库存变化 :">{{ detailData.recoderChanage }}</el-form-item>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
               <el-form-item label="原因 :">{{ detailData.recoderReason }}</el-form-item>
              </div></el-col>
            </el-row>
            <el-row type="flex" class="row-bg" justify="center">
              <el-col :span="6">
                  <div class="grid-content bg-purple">
                   <el-form-item label="经办人 :">{{ detailData.recoderOpter }}</el-form-item>
              </div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple">
               <el-form-item label="关联任务编号 :">{{ detailData.taskNo }}</el-form-item>
              </div></el-col>
            </el-row>
        </el-form>
       <div class="footer">
           <el-button size="small" @click="cancel">返 回</el-button>
       </div>
    </div>





</template>

<script>
import {getMaterialStoreList} from "./api";
export default {
     name: 'stockRecoderDetail',
    data() {
        return {
            detailData:null
        }
    },
    mounted() {
        this.detailData= this.$route.query.detailData
    },
    methods:{
     /*取消、关闭*/
        cancel() {
            this.$tab.closeOpenPage();
            this.$router.back()
        },
    }
}
</script>

<style lang="scss" scoped>
.fghdjs{
    text-align: center;
    justify-content: space-between;
    padding-top: 3rem;
    .el-form {
        .el-form-item {
            display: flex;
            align-items: center;
            color: #555;

            ::v-deep.el-form-item__label{
                text-align: left;

            }
        }

        .el-image {
            width: 120px;
            height: 120px;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #eee;
        }
    }
    .footer{
        margin-top: 6rem;
    }
}



</style>
